• Adding and Aligning Controls in an Absolute Layout Container
• Placing Multiple Absolute Layout Containers Inside a Tab Control
• Using Absolute Layout Containers in Responsive Design
• Using Background Images in an Absolute Layout Container
• Using Customized Radio Buttons in an Absolute Layout Container

Adding and Aligning Controls in an Absolute Layout Container

Description

The Absolute Layout Container allows you to use a 'what you see is what you get' type editor when adding and arranging controls inside a component.

Controls arranged in an absolute layout container.

Initially a number of controls are wrapped inside the 'AbsoluteLayout' container; which is a sub-type of the [Container] control defined in the 'Containers' menu. These controls are then positioned inside the absolute layout container using the 'Set Absolute Position and Size' editor. The positioning of controls in an absolute layout container is covered in the guide below and in this video.

Create an Absolute Container

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the textbox the name and label of 'firstname'.

   

2. Add five more [TextBox] controls to the component. Name and label these controls 'lastname', 'address', 'city', 'state', and 'zip'.

   

3. Highlight all of the textbox controls. Open the 'Containers' menu and click on the [Container] option.

   

4. From the Container Type list select the 'AbsoluteLayout' option and click 'Insert Around'

   

5. The controls tree:

   

Add Controls to the Absolute Container

1. Highlight the opening tag for the AbsoluteLayout container, "[AbsoluteLayout: ABSOLUTELAYOUT_1]".

   

2. In the properties list on the right, in the 'Container Begin Properties' section, click the [...] button next to the 'Absolute positions for controls' property. The 'Set Absolute Position and Size' editor will open.

   

3. There should be a dotted rectangle inside the 'Set Absolute Position and Size' editor's middle panel. This represents the size of the 'AbsoluteLayout' container as it will appear when the component is run.

   

4. Use the grey triangle in the lower right-hand corner of this dotted line to make the absolute layout container larger.

   

5. In the fields list in the top left corner highlight the 'firstname' field.

   

6. Place the mouse cursor inside the dotted line representing the absolute layout container. Hold down the left mouse button, and drag out a rectangle. Drag the rectangle until it is the size that you want the firstname textbox control to appear.

   

7. Release the left mouse button to drop the rectangle. The 'lastname' textbox control should automatically become highlighted. Drag out a second box to add the lastname textbox to the 'Absolute Layout' container.

   

8. Place the remaining controls inside the absolute layout container. Click OK to return to the UX Controls page.

   

9. Run the component in Live Preview. The controls should appear just as they did inside the 'Set Absolute Position and Size' editor.

   

Align the Textbox Controls in the Container

1. Go back to the Design pane and re-open the UX Controls page. Highlight the opening AbsoluteLayout container tab and the click the [...] button next to the 'Absolute positions for controls' property.

   

2. The 'Set Absolute Position and Size' editor will open. Hold down the 'Shift' key on your keyboard and, with the left mouse button, click on each of the textbox controls in the editor's layout panel.

   

3. Click the Edit Selected dropdown button. Select the 'Match Height' option from the list and then the 'First Selected' option.

   

4. To create a uniform width for controls in the container you can click on the border of a given control, hold down the left mouse button, and then move the control border into place. Blue vertical and horizontal guide-lines will illustrate when controls are aligned.

   

5. To undo or redo an edit to the layout, utilize the undo and redo options. Click OK to close the editor

   

6. Run the component in Live Preview. The controls should now be aligned.

   

Add Watermarks to the Controls

1. In the Design tab open the UX Controls page again. Highlight the 'firstname' textbox control in the controls tree.

   

2. In the properties list on the right scroll down to the 'Textbox Properties' section. Check the 'Watermark' property checkbox.

   

3. Leave the 'Watermark text' property set to <FieldLabel>. This is the placeholder for the textbox control's label.

   

4. Highlight the 'Watermark' property.

   

5. In the UX Controls page toolbar click the 'Paste property value' icon.

   

6. Highlight all of the controls and click OK to set the 'Watermark' property for all of the controls to true. Click the 'Set Properties' button to return to the Controls page.

   

7. Run the component in Live Preview. Now each one of the textbox controls should contain a watermark with the field label for that control.